<template>
  <div class="my">
    <div class="content" @click="tan">
      <!-- 顶部图片 -->
      <mt-swipe
        class="swipe"
        :auto="0"
        :style="{ height: h }"
        :showIndicators="false"
      >
        <mt-swipe-item>
          <img src="../assets/home/01.png" alt="" />
        </mt-swipe-item>
      </mt-swipe>

      <!-- 用户内容 -->
      <div class="user">
        <!-- user-top -->
        <div class="user-top clearfix">
          <!-- 已登录 -->
          <div class="user-text" v-if="isLogin">
            <span>Hey,{{ userInfo.userName }}</span>
            <p>嘭，来杯灵感</p>
            <h3>GO会员</h3>
            <span class="vip-grade">Lv1</span>
          </div>
          <!-- 未登录 -->
          <div class="user-text" v-else>
            <h3>GO会员</h3>
            <button class="login-btn">点击登录</button>
          </div>
          <!-- 用户头像 -->
          <router-link to="/personInfo" v-show="isLogin">
            <div class="user-img">
              <van-image
                class="vant-img"
                round
                fit="cover"
                width="5rem"
                height="5rem"
                :src="`${userInfo.userImg}`"
              />
            </div>
          </router-link>
        </div>
        <!-- user-bottom -->
        <div class="user-bottom d-flex">
          <div class="points-mall">
            <img src="../assets/logo.png" alt="" />
            <h6 v-if="!isLogin">***</h6>
            <h6 v-else>{{ userInfo.userIntegral }}</h6>
            <!-- <h6 v-else>{{ userId }}</h6> -->
            <h6>积分商城</h6>
          </div>
          <div class="points-mall">
            <img src="../assets/logo.png" alt="" />
            <h6 v-if="!isLogin">***</h6>
            <h6 v-else>0</h6>
            <h6>粥品劵</h6>
          </div>
          <div class="points-mall">
            <img src="../assets/logo.png" alt="" />
            <h6 v-if="!isLogin">***</h6>
            <h6 v-else>0</h6>
            <h6>阿粥有礼</h6>
          </div>
          <!-- <div class="points-mall">
            <img src="../assets/logo.png" alt="" />
            <h6>***</h6>
            <h6>积分商城</h6>
          </div> -->
        </div>
      </div>

      <!-- 积分中心 -->
      <div class="integral d-flex justify-content-between" @click="signIn">
        <div class="integral-text">
          <h6>任务中心</h6>
          <span>MISSION CENTER</span>
        </div>
        <img src="../assets/home/jifen.png" alt="" />
      </div>

      <!-- 单元格，展开列表信息 -->
      <!-- 未登录不可跳转 -->
      <div class="cell" v-if="!isLogin">
        <mt-cell title="会员码" is-link value="门店扫码积分"> </mt-cell>
        <mt-cell title="兑换中心" is-link value="兑换会员礼品"> </mt-cell>
        <mt-cell title="主题封面" is-link> </mt-cell>
        <mt-cell title="发票助手" is-link> </mt-cell>
        <mt-cell title="联系客服" is-link> </mt-cell>
        <mt-cell title="消息中心" is-link> </mt-cell>
        <mt-cell title="设置" is-link> </mt-cell>
      </div>

      <!-- 登录可跳转 -->
      <div class="cell" v-else>
        <mt-cell title="会员码" is-link value="门店扫码积分"> </mt-cell>
        <mt-cell title="兑换中心" to="/" is-link value="兑换会员礼品">
        </mt-cell>
        <mt-cell title="主题封面" is-link> </mt-cell>
        <mt-cell title="发票助手" is-link> </mt-cell>
        <mt-cell title="联系客服" is-link> </mt-cell>
        <mt-cell title="消息中心" is-link> </mt-cell>
        <mt-cell title="设置" to="/setting" is-link> </mt-cell>
      </div>
    </div>

  </div>
</template>

<script>
// 引入state函数
import { mapState } from "vuex";
import { MessageBox } from "mint-ui";

export default {
  components: {},
  data() {
    return {
      h: "211px",
      // isLogin:false,  //是否登录
      userInfo: {} //用户信息
    };
  },
  methods: {
    // 初始化轮播图
    initSwipe() {
      let picWidth = 1100; //图片宽度
      let picHeight = 620; //图片高度
      let screenWidth = window.screen.width; //屏幕的宽度
      let swipeHeight = Math.floor(picHeight * screenWidth / picWidth) + "px"; //（图片的高*屏幕的宽）除以图片的宽，向下取整
      this.h = swipeHeight;
    },
    // 是否登录弹框
    tan() {
      if (this.isLogin == null) {
        MessageBox.alert("请先登录").then(() => {
          this.$router.push("/login");
        });
      }
    },

    // 签到
    signIn() {
      if (this.isLogin) {
        this.$router.push("/points");
      } else {
        tan();
      }
    }
  },
  // 结构变量
  computed: {
    ...mapState(["isLogin", "userId"]) //是否登录
  },

  //页面挂载完成后，根据屏幕的宽度，计算图片的高度
  mounted() {
    this.initSwipe();
    if (this.isLogin) {
      // 获得当前用户id
      this.axios.get(`/api/user/getUser?userId=${this.userId}`).then(result => {
        // console.log(result);
        // 用户信息
        this.userInfo = result.data.data;
        // 测试当前用户信息
        // console.log(this.userInfo);
      });
    }
    // 测试是否登录
    // console.log(this.isLogin);

  }
};
</script>

<style lang="scss" scoped>
/* 顶部图片*/
.swipe {
  img {
    width: 100%;
  }
}
.content {
  overflow-y: scroll;
  position: fixed;
  bottom: 63px;
  left: 0;
  right: 0;
  top: 0;
  .user {
    background-color: white;
    width: 90%;
    height: 260px;
    margin: 20px auto;
    position: relative;
    border-radius: 10px;
    margin-top: -20px;
    box-shadow: 2px 2px 10px #ccc;
    .user-top {
      height: 120px;
      border-bottom: 1px solid #333;
      padding: 12px 0;
      .user-text {
        float: left;
        margin-left: 10px;
        p {
          font-size: 12px;
          margin: 0;
        }
        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: bold;
        }
        .vip-grade {
          border: 1px solid black;
          display: inline-block;
          padding: 0 10px;
          border-radius: 5px;
          font-size: 12px;
        }
        .login-btn {
          background-color: black;
          color: white;
          border-radius: 10px;
          border: 0;
          font-size: 12px;
          display: inline-block;
          padding: 3% 12%;
        }
      }
      .user-img {
        .vant-img {
          float: right;
          margin: 2% 5%;
        }
      }
    }
    .user-bottom {
      text-align: center;
      padding: 20px 0;
      .points-mall {
        img {
          width: 50%;
        }
        h6 {
          margin: 0;
        }
      }
    }
  }
  .integral {
    width: 90%;
    height: 100px;
    margin: 5% auto;
    // background-color: rgb(233, 183, 147);
    border-radius: 10px;
    box-shadow: 0 0 10px #ccc;
    .integral-text {
      text-align: center;
      padding: 30px;
      h6 {
        margin: 0;
        font-size: 14px;
      }
      span {
        display: inline-block;
        font-size: 12px;
      }
    }
    img {
      height: 60px;
      margin: 20px;
    }
  }
}
</style>